@use "tom-select/dist/scss/tom-select";

.proposal-list {
  &__aside {
    &__button-container {
      @apply flex flex-col gap-4 md:gap-10 w-full;
    }
  }

  &__map {
    /* negative main padding values */
    @apply md:-ml-16 -mt-6 md:-mt-12 aspect-square md:aspect-[21/9] [&>*]:h-full [&+*]:mt-6 md:[&+*]:mt-12;
  }
}

.proposal {
  &__cost {
    @apply space-y-3 bg-background rounded p-4 text-black;

    &-period {
      @apply text-gray-2 uppercase text-sm;
    }
  }

  &__aside {
    &-vote {
      @apply flex flex-row-reverse md:flex-col gap-4 items-center md:items-stretch justify-around md:last:[&>*]:w-auto;
    }
  }

  &__container {
    [data-decidim-map] {
      @apply aspect-[5/1];
    }
  }
}

.proposal-participatory {
  &__heading {
    @apply pb-6 border-b-4 border-background font-sans font-semibold text-xl md:text-3xl;
  }

  &__section {
    @apply p-4 rounded hover:bg-background-4 space-y-4 transition;
  }

  &__section + &__section {
    @apply mt-2;
  }

  &__title {
    @apply block font-semibold text-xl text-secondary;
  }

  &__text {
    @apply text-md text-gray-2;
  }

  &__button {
    @apply inline-flex items-center gap-1 px-0 md:px-6 border-gray-3 border-0 md:border-r first:pl-0 last:pr-0 last:border-r-0 text-sm text-secondary;

    & > span {
      @apply underline;
    }

    & > svg {
      @apply w-3.5 h-3.5 fill-current text-gray;
    }
  }

  &__section:hover &__title {
    @apply underline;
  }

  &__section:hover .label {
    @apply text-white bg-secondary;
  }
}

#proposals {
  .view-layout__links {
    @apply flex gap-4 items-center;

    svg {
      @apply inline-block w-5 h-5;

      &.view-icon {
        @apply border border-black border-solid;
      }

      &.view-icon--disabled {
        @apply fill-gray;
      }
    }
  }
}

.card {
  &__proposal-placeholder-g {
    @apply w-full h-full fill-primary;

    g {
      path {
        @apply fill-primary;
      }
    }
  }

  &__grid-text-title {
    @apply flex justify-between items-start gap-y-2 flex-row md:flex-col lg:flex-row;
  }

  &__list-list {
    .card__proposals-item {
      @apply border-l-4 rounded-[10px] md:rounded-md border-neutral-100 hover:border-tertiary focus-visible:border-tertiary flex flex-col md:items-center md:flex-row md:justify-between min-h-0 md:min-h-[127px] lg:min-h-[83px];

      .card__list {
        @apply border-none md:flex-1 md:items-center mb-2.5 md:mb-0;

        &-metadata {
          @apply gap-y-1 md:flex md:flex-row md:items-center md:gap-x-2 md:mt-0.5;

          & > div {
            @apply md:pl-0 md:pr-2;
          }
        }
      }

      .card__proposals-votes,
      .card__proposals-votes-hidden {
        @apply flex md:flex-col lg:flex-row bg-neutral-100 justify-around md:flex-[0.6] lg:flex-[0.8] items-center md:items-stretch lg:items-center lg:min-w-[196px] h-[68px] md:h-auto lg:h-[68px];

        button {
          @apply bg-[var(--secondary)];

          &[disabled] {
            @apply opacity-50 text-white border-current cursor-not-allowed;
          }
        }

        &-limited {
          @apply flex flex-col p-0 md:p-2 lg:p-0 md:flex-row md:flex-wrap lg:flex-col lg:flex-nowrap flex-1 md:flex-none lg:flex-1 justify-center;

          .proposals__aside-progress {
            @apply flex flex-col w-[80%] items-center md:order-1 lg:order-none md:flex-[1_1_100%] lg:flex-none;

            .progress-bar {
              @apply bg-[#D3D5D9] border-white border border-solid;

              > :first-child {
                @apply outline outline-white;
              }
            }
          }

          .progress-bar {
            &__units {
              @apply md:order-none;
            }

            &__number {
              span {
                @apply text-sm;
              }

              > :last-child::before {
                @apply content-['/'] mx-1;
              }
            }
          }
        }

        &-unlimited {
          @apply flex flex-row flex-1 lg:flex-1 justify-center md:flex-none;

          .progress-bar__number {
            span {
              @apply text-xl;
            }
          }
        }

        .progress-bar {
          &__number {
            @apply flex justify-center items-center mx-1;

            span {
              @apply leading-6 font-semibold #{!important};
            }
          }

          &__units {
            @apply text-sm leading-[22px] mx-1;
          }
        }

        &-container {
          @apply flex-1 md:w-full md:flex-none p-2 lg:p-0 lg:m-3 lg:w-[164px];

          button {
            @apply text-sm leading-[18px] font-semibold py-1;
          }
        }

        &-hidden {
          @apply md:flex-none;

          .card__proposals-votes-container {
            @apply md:flex-none md:w-[130px] lg:w-[164px] lg:p-0;
          }
        }
      }
    }
  }

  &__grid-grid {
    @apply md:gap-4;

    .card__proposals-item {
      @apply flex flex-col mt-6 justify-between border-solid border-[#D3D5D9] border rounded;

      .card__grid {
        @apply mb-2.5 md:mb-0 flex-1 justify-between;

        box-shadow: none !important;

        &-text {
          @apply justify-end lg:gap-y-8;
        }

        &-metadata {
          @apply mt-0 md:flex md:flex-row;

          > :first-child {
            flex: 1 !important;
          }

          > :not(:first-child) {
            @apply border-r border-[#D3D5D9];
          }

          & > div {
            @apply px-2 md:px-2;
          }
        }
      }

      .card__proposals-votes,
      .card__proposals-votes-hidden {
        @apply flex bg-[#F5F5F5EE] justify-around items-center px-4 h-[68px];

        button {
          @apply bg-[var(--secondary)];

          &[disabled] {
            @apply opacity-50 text-white border-current cursor-not-allowed;
          }
        }

        &-limited {
          @apply flex flex-col lg:items-start flex-1 md:mr-4 lg:mr-0;

          .proposals__aside-progress {
            @apply flex flex-col-reverse w-[80%] items-center;

            .progress-bar {
              @apply bg-[#D3D5D9] border-white border border-solid;

              > :first-child {
                @apply outline outline-white;
              }
            }
          }

          .progress-bar {
            &__number {
              @apply lg:w-[80%];

              span {
                @apply text-sm;
              }

              > :last-child::before {
                @apply content-['/'] mx-1;
              }
            }

            &__units {
              @apply flex justify-center w-[80%];
            }
          }
        }

        &-unlimited {
          @apply flex flex-row flex-1 lg:flex-1 md:flex-none md:mr-4 lg:mr-0;

          .progress-bar__number {
            span {
              @apply text-xl;
            }
          }
        }

        .progress-bar {
          &__number {
            @apply flex justify-center items-center;

            span {
              @apply leading-6 font-semibold #{!important};
            }
          }

          &__units {
            @apply text-sm leading-[22px] mx-1;
          }
        }

        &-container {
          @apply flex-1 lg:w-[164px] lg:flex-none;

          button {
            @apply text-sm leading-[18px] font-semibold py-1;

            .already-voted-icon {
              @apply w-4 h-4;
            }
          }
        }

        &-hidden {
          @apply md:justify-end;

          .card__proposals-votes-container {
            @apply md:flex-none md:w-[130px] lg:w-[164px];

            button {
              @apply md:px-0 lg:px-6;
            }
          }
        }
      }
    }
  }
}

/* overwrite tom-select defaults */
.ts {
  &-control {
    @apply border-gray text-md min-h-[40px];

    input {
      @apply font-normal text-black text-md;
    }
  }

  &-dropdown {
    @apply text-md text-gray-2 font-normal;

    .active {
      @apply text-white bg-secondary;
    }
  }
}

#proposal-voting-rules {
  [id="dropdown-menu-proposal-voting-rules"] {
    &[aria-hidden="true"] {
      @apply hidden;
    }
  }

  [data-target="dropdown-menu-proposal-voting-rules"] {
    @apply w-full flex items-center justify-between gap-2 p-2 first-of-type:[&>svg]:block last-of-type:[&>svg]:hidden;

    & > span {
      @apply hidden font-semibold text-secondary;

      &:only-of-type,
      &.is-active {
        @apply flex items-center gap-2 [&_svg]:fill-current;
      }
    }

    > svg {
      @apply w-6 h-6 flex-none text-secondary fill-current;
    }

    &[aria-expanded="false"] > svg:last-of-type,
    &[aria-expanded="true"] > svg:first-of-type {
      @apply hidden;
    }

    &[aria-expanded="true"] > svg:last-of-type,
    &[aria-expanded="false"] > svg:first-of-type {
      @apply block;
    }
  }
}

.layout-item-complementary {
  @apply container grid grid-cols-1 lg:grid-cols-12;

  .item_voting_rules {
    @apply lg:col-start-2 lg:col-span-10;
  }
}

#form-merge-proposals {
  .custom-inputs {
    input {
      @apply mt-0;
    }
  }

  .upload-modal__files-container {
    label {
      @apply mb-0;
    }

    button {
      @apply mt-0;
    }
  }
}

.form__wrapper,
.form-proposals-merge-styles {
  .proposal-field-custom-style {
    & label:not(&-checkbox-label),
    &-block label:not(&-checkbox-label) {
      @apply font-normal text-sm;
    }
  }
}

.proposal__aside-vote {
  button[disabled] {
    @apply bg-[var(--secondary)] opacity-50 text-white border-current cursor-not-allowed;
  }
}

.card__proposals-item {
  & + & {
    @apply mt-6;
  }
}
